<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>3D相册</title>
    <base target="_blank" />
</head>
<style>
    html{
     background:url('img/0.jpg') center center;
     box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
        height: 100%;
        color:red;
        font-family: arial,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
    }
    h2{
      position: fixed;
      width: 100%;
      transform:translateY(-50%);
      font-family: 'Love Ya Like A Sister', cursive;
      font-size: 30px;
      color: #c70012;
      padding: 0 20px;
    }
    .sy {
            background:#2f373a;
            font-family:Arial,Helvetica,sans-serif;font-size:100%;
            line-height:1em;color:#4e4e4e;
            min-width:920px;
            border-top:10px solid #0c0e0e
          }
    
    /*最外层容器样式*/
    .wrap{
        width: 200px;
        height: 200px;
        /*改变左右上下,图片方块移动*/
        margin: 150px auto;
        position: relative;
        
    }
    /*包裹所有容器样式*/
    .cube{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
        -webkit-animation: rotate 20s infinite;
        /*匀速*/
        animation-timing-function: linear;
    }
    @-webkit-keyframes rotate{
        from{transform: rotateX(0deg) rotateY(0deg);}
        to{transform: rotateX(360deg) rotateY(360deg);}
    }
    .cube div{
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
        transition: all .4s;
    }
    /*定义所有图片样式*/
    .pic{
        width: 200px;
        height: 200px;
    }
    .cube .out_front{
        transform: rotateY(0deg) translateZ(100px);
    }
    .cube .out_back{
        transform: translateZ(-100px) rotateY(180deg);
    }
    .cube .out_left{
        transform: rotateY(90deg) translateZ(100px);
    }
    .cube .out_right{
        transform: rotateY(-90deg) translateZ(100px);
    }
    .cube .out_top{
        transform: rotateX(90deg) translateZ(100px);
    }
    .cube .out_bottom{
        transform: rotateX(-90deg) translateZ(100px);
    }
    /*定义小正方体样式
        by 何问起
    */
    .cube span{
        display: bloack;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .cube .in_pic{
        width: 100px;
        height: 100px;
    }
    .cube .in_front{
        transform: rotateY(0deg) translateZ(50px);
    }
    .cube .in_back{
        transform: translateZ(-50px) rotateY(180deg);
    }
    .cube .in_left{
        transform: rotateY(90deg) translateZ(50px);
    }
    .cube .in_right{
        transform: rotateY(-90deg) translateZ(50px);
    }
    .cube .in_top{
        transform: rotateX(90deg) translateZ(50px);
    }
    .cube .in_bottom{
        transform: rotateX(-90deg) translateZ(50px);
    }
    /*鼠标移入后样式*/
    .cube:hover .out_front{
        transform: rotateY(0deg) translateZ(200px);
    }
    .cube:hover .out_back{
        transform: translateZ(-200px) rotateY(180deg);
    }
    .cube:hover .out_left{
        transform: rotateY(90deg) translateZ(200px);
    }
    .cube:hover .out_right{
        transform: rotateY(-90deg) translateZ(200px);
    }
    .cube:hover .out_top{
        transform: rotateX(90deg) translateZ(200px);
    }
    .cube:hover .out_bottom{
        transform: rotateX(-90deg) translateZ(200px);
    }
    .hovertreeinfo{
        text-align:center;
        color: transparent;
        -webkit-text-stroke: 1px #FF1CAE;
        letter-spacing: 0.04em;
    }
    
    .text{
        width: 300px;
        height: 200px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        text-align:center;
        background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
        -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
        -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
        -webkit-background-size: 200% 100%; 
        -webkit-animation: masked-animation 4s linear infinite;
        font-size: 40px;
    }
    
    @keyframes masked-animation {
        0% {
            background-position: 0  0;
        }
        100% {
            background-position: -100%  0;
        }
    }
    </style>
<body>
    <div class="hovertreeinfo">
    <HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3></HR>
    <p>因为有你，世界变得美丽；<br>因为有你，生活有了意义；<br>因为有你，一切都是甜蜜。<br>亲爱的浦娅，情人节快乐！</p>
    <HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3></HR>
    <br><br>
	</div>
    <div>
        <h1 class="text">情人节快乐</h1>
    </div>
    <div class="wrap">
        <div class="cube">
            <div class="out_front">
                <img src="img/1.jpg" class="pic" />  <!-- 外前 -->
            </div>
            <div class="out_back">
                <img src="img/2.jpg" class="pic" />  <!-- //外后 -->
            </div>
            <div class="out_left">
                <img src="img/3.jpg" class="pic" />  <!-- //外左 -->
            </div>
            <div class="out_right">
                <img src="img/4.jpg" class="pic" />  <!-- //外右 -->
            </div>
            <div class="out_top">
                <img src="img/5.jpg" class="pic" />  <!-- 外上 -->
            </div>
            <div class="out_bottom">
                <img src="img/6.jpg" class="pic" />  <!-- 外下 -->
            </div>
            <!--小正方体 -->
            <span class="in_front">
                <img src="img/7.jpg" class="in_pic" /> <!-- //内前 -->
            </span>
            <span class="in_back">
                <img src="img/8.jpg" class="in_pic" /> <!-- //内后 -->
            </span>
            <span class="in_left">
                <img src="img/2.jpg" class="in_pic" /> <!-- 内左 -->
            </span>
            <span class="in_right">
                <img src="img/1.jpg" class="in_pic" /> <!-- 内右 -->
            </span>
            <span class="in_top">
                <img src="img/4.jpg" class="in_pic" /> <!-- 内上 -->
            </span>
            <span class="in_bottom">
                <img src="img/3.jpg" class="in_pic" /> <!-- 内下 -->
            </span>
        </div>
    </div>
    <audio controls autoplay hidden> 
        <source src="img/ccy.mp3" type="audio/mpeg">
      您的浏览器不支持 audio 元素。
      </audio>
</body>

</html>